<template>
	<view class="page-block">
		<cl-message ref="message"></cl-message>
		<view class="page-wrapper">
			<text class="register-title">欢迎注册科成拍卖平台</text>
			<view class="input-wrapper">
				<input :class="errorName" type="text" placeholder="昵称(必填)" maxlength="16" @input='dataChange' v-model="name" @focus='nameFocus'
				 @blur='nameBlur' />
				<view :class="nameTips">
					<text style="height: 100%;">不能有空格</text>
					<text style="height: 100%;">长度为1-16个字符(汉字算两个字符)</text>
				</view>
				<text :class="errorNameTips">{{errorNameMsg}}</text>
				<input :class="errorPw" type="text" password placeholder="密码(必填)" maxlength="16" @input='dataChange' v-model="password"
				 @focus='pwFocus' @blur='pwBlur' />
				<view :class="passwordTips">
					<text style="height: 100%;">不能有空格</text>
					<text style="height: 100%;">长度为6-16个字符</text>
					<text style="height: 100%;">必须包含字母、数字、符号中至少2种</text>
				</view>
				<text :class="errorPwTips">{{errorPwMsg}}</text>
				<input :class="errorPay" type="text" password placeholder="支付密码(必填)" maxlength="6" @input='dataChange' v-model="payPassword"
				 @focus='payFocus' @blur='payBlur' />
				<view :class="payTips">
					<text style="height: 100%;">不能有空格</text>
					<text style="height: 100%;">长度为6个数字</text>
				</view>
				<text :class="errorPayTips">{{errorPayMsg}}</text>
				<genderPopup class="gender" @change='dataChange'></genderPopup>
				<input type="text" placeholder="手机号(必填)" maxlength="11" @input='dataChange' v-model="phone" />
				<input type="text" placeholder="邮箱" maxlength="20" @input='dataChange' v-model="email" />
				<input type="text" placeholder="QQ" maxlength="11" @input='dataChange' v-model="qq" />
				<button class="register-btn" :disabled="isDisabled" @click="register">注&nbsp;&nbsp;册</button>
			</view>
		</view>
	</view>
</template>

<script>
	import genderPopup from '@/components/gender-popup/gender-popup.vue'
	export default {
		components: {
			genderPopup
		},
		data() {
			return {
				name: '',
				password: '',
				payPassword: '',
				phone: '',
				email: null,
				gender: '',
				qq: null,
				isDisabled: true,
				nameTips: ["name-tips", "slideup"],
				errorNameTips: ["error-tip", "slideup"],
				errorNameMsg: '',
				errorName: [],
				passwordTips: ["password-tips", "slideup"],
				errorPwTips: ["error-tip", "slideup"],
				errorPwMsg: '',
				errorPw: [],
				payTips: ["pay-tips", "slideup"],
				errorPayTips: ["error-tip", "slideup"],
				errorPayMsg: '',
				errorPay: []
			}
		},
		methods: {
			dataChange(e) {
				if (e.target != null && e.target.id == "gender") {
					this.gender = e.val;
				}
				if (this.name != '' && this.password != '' && this.payPassword != '' && this.phone != '' && this.gender != '') {
					this.isDisabled = false;
				} else {
					this.isDisabled = true;
				}
			},
			nameFocus() {
				if (this.nameTips.indexOf("slideup") != -1) {
					this.nameTips.pop()
				}
				if (this.errorNameTips.indexOf("slideup") == -1) {
					this.errorNameTips.push("slideup")
				}
				if (this.errorName.length >= 1) {
					this.errorName.pop()
				}
			},
			nameBlur() {
				if (this.nameTips.indexOf("slideup") == -1) {
					this.nameTips.push("slideup")
				}
				if (this.name.indexOf(" ") != -1) {
					this.errorNameMsg = "不能有空格";
					if (this.errorNameTips.indexOf("slideup") != -1) {
						this.errorNameTips.pop()
					}
					if (this.errorName.indexOf("error-input") == -1) {
						this.errorName.push("error-input")
					}
					return
				}
				var len = this.name.length;
				if (RegExp(/[\u2E80-\u9FFF]/).test(this.name)) {
					len = this.name.match(/[\u2E80-\u9FFF]/g).length + len;
				}
				// 若长度超过16或小于1
				if (len > 16 || len < 1) {
					this.errorNameMsg = "长度为1-16个字符";
					if (this.errorNameTips.indexOf("slideup") != -1) {
						this.errorNameTips.pop()
					}
					if (this.errorName.indexOf("error-input") == -1) {
						this.errorName.push("error-input")
					}
					return
				}
			},
			pwFocus() {
				if (this.passwordTips.indexOf("slideup") != -1) {
					this.passwordTips.pop()
				}
				if (this.errorPwTips.indexOf("slideup") == -1) {
					this.errorPwTips.push("slideup")
				}
				if (this.errorPw.length >= 1) {
					this.errorPw.pop()
				}
			},
			pwBlur() {
				if (this.passwordTips.indexOf("slideup") == -1) {
					this.passwordTips.push("slideup")
				}
				if (this.password.indexOf(" ") != -1) {
					this.errorPwMsg = "不能有空格";
					if (this.errorPwTips.indexOf("slideup") != -1) {
						this.errorPwTips.pop()
					}
					if (this.errorPw.indexOf("error-input") == -1) {
						this.errorPw.push("error-input")
					}
					return
				}
				if (this.password.length < 6 || this.password.length > 16) {
					this.errorPwMsg = "长度为6-16个字符";
					if (this.errorPwTips.indexOf("slideup") != -1) {
						this.errorPwTips.pop()
					}
					if (this.errorPw.indexOf("error-input") == -1) {
						this.errorPw.push("error-input")
					}
					return
				}
				if (!RegExp(/(?!^(\d+|[a-zA-Z]+|[~!@#$%^&*?.]+)$)^[\w~!@#$%^&*?.]{6,16}$/).test(this.password)) {
					this.errorPwMsg = "必须包含字母、数字、符号中至少2种";
					if (this.errorPwTips.indexOf("slideup") != -1) {
						this.errorPwTips.pop()
					}
					if (this.errorPw.indexOf("error-input") == -1) {
						this.errorPw.push("error-input")
					}
					return
				}
			},
			payFocus() {
				if (this.payTips.indexOf("slideup") != -1) {
					this.payTips.pop()
				}
				if (this.errorPayTips.indexOf("slideup") == -1) {
					this.errorPayTips.push("slideup")
				}
				if (this.errorPay.length >= 1) {
					this.errorPay.pop()
				}
			},
			payBlur() {
				if (this.payTips.indexOf("slideup") == -1) {
					this.payTips.push("slideup")
				}
				if (this.payPassword.indexOf(" ") != -1) {
					this.errorPayMsg = "不能有空格";
					if (this.errorPayTips.indexOf("slideup") != -1) {
						this.errorPayTips.pop()
					}
					if (this.errorPay.indexOf("error-input") == -1) {
						this.errorPay.push("error-input")
					}
					return
				}
				if (!RegExp(/^[0-9]{6}$/).test(this.payPassword)) {
					this.errorPayMsg = "长度为6个数字";
					if (this.errorPayTips.indexOf("slideup") != -1) {
						this.errorPayTips.pop()
					}
					if (this.errorPay.indexOf("error-input") == -1) {
						this.errorPay.push("error-input")
					}
					return
				}
			},
			register() {
				if (this.name.length < 1) {
					this.$refs["message"].open({
						type: 'cancel',
						message: "昵称长度不足",
						duration: 2000,
						iconSize: 24
					});
					return
				}
				if (this.name.indexOf(" ") != -1) {
					this.$refs["message"].open({
						type: 'cancel',
						message: "昵称不能包含空格",
						duration: 2000,
						iconSize: 24
					});
					return
				}
				var len = this.name.length;
				if (RegExp(/[\u2E80-\u9FFF]/).test(this.name)) {
					len = this.name.match(/[\u2E80-\u9FFF]/g).length + len;
				}
				// 若长度超过16
				if (len > 16) {
					this.$refs["message"].open({
						type: 'cancel',
						message: "昵称长度为1-16个字符(汉字算两个字符)",
						duration: 2000,
						iconSize: 24
					});
					return
				}
				if (this.password.length < 6) {
					this.$refs["message"].open({
						type: 'cancel',
						message: "密码长度不足",
						duration: 2000,
						iconSize: 24
					});
					return
				}
				if (!RegExp(/(?!^(\d+|[a-zA-Z]+|[~!@#$%^&*?.]+)$)^[\w~!@#$%^&*?.]{6,16}$/).test(this.password)) {
					this.$refs["message"].open({
						type: 'cancel',
						message: "密码格式错误",
						duration: 2000,
						iconSize: 24
					});
					return
				}
				if (!RegExp(/^1[3456789]\d{9}$/).test(this.phone)) {
					this.$refs["message"].open({
						type: 'cancel',
						message: "手机号格式错误",
						duration: 2000,
						iconSize: 24
					});
					return
				}
				if (this.email != null && this.email != '' && !RegExp(/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/).test(
						this.email)) {
					this.$refs["message"].open({
						type: 'cancel',
						message: "邮箱格式错误",
						duration: 2000,
						iconSize: 24
					});
					return
				}
				if (this.qq != null && this.qq != '' && !RegExp(/^\d{5,11}$/).test(this.qq)) {
					this.$refs["message"].open({
						type: 'cancel',
						message: "QQ格式错误",
						duration: 2000,
						iconSize: 24
					});
					return
				}
				let user = {
					name: this.name,
					password: this.password,
					payPassword: this.payPassword,
					phone: this.phone,
					email: this.email,
					gender: this.gender,
					qq: this.qq
				};
				// 发起注册请求
				this.$common.request(this.$serverUrl + "register", user, "POST", this.successCallback);
				this.$common.showLoading("注册中，清稍后...", true);
			},
			successCallback(res) {
				if (res.data.statusCode == "200") {
					this.$common.hideLoading();
					if (res.data.msg == "ok") {
						this.$common.showModal("注册成功！", false, this.registerSuccess);
					} else {
						this.$common.showModal(res.data.msg, false);
					}
				}
			},
			registerSuccess(res) {
				if (res.confirm || res.cancel) {
					if (getCurrentPages().length <= 1) {
						uni.redirectTo({
							url: "../login/login"
						})
					} else {
						uni.navigateBack({
							delta: 1
						})
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	@import url("register.css");

	/deep/ .cl-message {
		&__content {
			font-size: 16px;
		}
	}
</style>
